<template>
  <div style="position: relative;display: flex;flex-direction: column; align-items: center;">
    <div class="download_Modular"
         :default-active="index"
         @open="handlerOpen"
         @close="handlerClose">
      <div class="download_Modular_Content" style="width: 100%">
        <div class="down_Box_Up">
          <div class="download_Content_Item_Up">
            <div class="modular_Box">
              <div class="modular_Box_One">
                <el-row >
                  <span  class="download"  @click="downloadPos">点击下载</span>
                </el-row>
              </div>
            </div>
            <div class="content_Item_Name"  style="margin-top: 10px">
              <img src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/5.png" style="width: 80px; padding: 5px;border-radius: 15px">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="maskBox" id="mask"  v-if="isMask" @click="closeMask()">
      <div class="mask">
        <div class="mask-sign">
          <span id="span">{{maskTitle}}</span>
          <img class="mask-sign-imgBox" src="@/assets/mask.png"></img>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'downloadCenter',

  data(){
    return{
      index:'0',
      maskTitle:'请在浏览器中打开...',
      isMask:false
    }
  },
  props:[
    'indexBottom'
  ],
  created() {
    console.log(this.indexBottom)
    console.log('下载')
    this.index = this.indexBottom
  },
  methods: {
    handlerOpen(data){
      console.log(data)
    },
    handlerClose(){

    },
    downitem(data){
      console.log(data)
      this.index = data.index
    },
    //判断是否是微信浏览器的函数
    isWeiXin(){
      //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
      var ua = window.navigator.userAgent.toLowerCase();
      //通过正则表达式匹配ua中是否含有MicroMessenger字符串
      if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
      } else{
        return false;
      }
    },
    closeMask() {
      this.isMask = false;
    },
    downloadApp() {
      if (this.isWeiXin()) {
        //userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值
        var u = window.navigator.userAgent;
        //Android终端
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
        //iOS终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (isAndroid) {
          this.maskTitle = "点击“…”在浏览器打开";
        }
        if (isiOS) {
          this.maskTitle = "点击“…”在Safari浏览器打开";
        }
        this.isMask = true;
      } else {
        window.location.href = "http://cdn.rzico.com/qm365/dev-release.apk"

      }
    },
    downloadPos() {
      if (this.isWeiXin()) {
        //userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值
        var u = window.navigator.userAgent;
        //Android终端
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
        //iOS终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (isAndroid) {
          this.maskTitle = "点击“…”在浏览器打开";
        }
        if (isiOS) {
          this.maskTitle = "点击“…”在Safari浏览器打开";
        }
        this.isMask = true;
      } else {
        window.location.href = "http://cdn.rzico.com/qm365/dev-release.apk"
      }
    },

  }
}

</script>

<style>
.download_Bottom_Remind {
  color: #adadad;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 500;
}
.box_Content_Text {


  text-align: justify;
}

p{
  margin: 0;
  padding: 0;
}


.mask{
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.7);
  /*z-index: 99999;*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mask-sign-imgBox{
  width:70px;
  height:70px;
}
.mask-sign span{
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  margin-top: 20px;
  display: inline-block;
  letter-spacing: 1.25px;
  text-align: right;
  color: #ffffff;
}
.mask-sign{
  position: absolute;
  right: 0;
  top:0;
  padding-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.download{
  padding: 10px 0px;
  background-color: rgb(225, 40, 28);
  font-size: 12px;
  width: 80px;
  border: none;
  border-radius: 20px;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  /*cursor: pointer;*/
  color: white;

}

</style>





